<template>
  <div>
    <Rank></Rank>
    <div class="content-list">
      <div class="content" v-for="video in homeStore.videoList" :key="video.id">
        <Card :video="video"></Card>
      </div>
      <AddMore :VideoList="homeStore.videoList"></AddMore>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import homeApi, { type ProductionScreenModel, type ContentModel } from '@/api/mockHome'
import useHomeStore from '@/stores/home';
const homeStore = useHomeStore()

// console.log(homeStore)
// const VideoList = ref<ContentModel[]>([])

//获取视频列表
// const getVideos = async () => {
//   try {
//     const result = await homeApi.getProductionSynthesize()
//     VideoList.value = result.content

//     console.log(result)
//   } catch (error) {
//     console.log(error)
//   }
// }

// console.log(VideoList)

// const addVideo = ()=>{
//   VideoList.value.push(...VideoList.value)
// }

onMounted(() => {
  // getVideos()
  homeStore.getHomeRecommend()
})
</script>

<style scoped lang="scss">
.content-list {
  display: flex;
  flex-wrap: wrap;

  // margin-top: 10px;
  .content {
    margin-right: 20px;

    &:nth-child(5n) {
      margin-right: 0;
    }

    margin-bottom: 20px;
  }


}
</style>